<template>
  <basic-dialog :visible="show"
                :title="`${type==='edit'? '编辑': '添加'}库位`"
                :min-width="'300px'"
  >
    <q-form @submit="onSubmit"
            greedy
            @reset="onReset"
            ref="myForm"
            class="dialog-content form-inline block">
      <div class="padding-t-20">
        <div class="font-size-16 padding-b-20">{{`所属仓库: ${warehouse.name}`}}</div>
        <div>
          <q-input v-model="param.number"
                   dense
                   emit-value
                   map-options
                   :rules="[val => val !== '' || '不可为空']"
                   maxlength="20"
                   placeholder="请输入库位编号"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span> <span>库位编号:</span>
              </label>
            </template>
          </q-input>
        </div>
        <div>
          <q-input v-model="param.name"
                   dense
                   emit-value
                   map-options
                   :rules="[val => val !== '' || '不可为空']"
                   maxlength="20"
                   placeholder="请输入库位名称"
                   outlined>
            <template v-slot:before>
              <label class="text-right name label-width">
                <span class="text-red">*</span> <span>库位名称:</span>
              </label>
            </template>
          </q-input>
        </div>
        <div>
          <q-input
            v-model.trim="param.remark"
            type="textarea" counter autogrow maxlength="50"
            outlined
            placeholder="请输入备注内容"
            class="textarea"
          >
            <template v-slot:before>
              <label class="text-right name">
                <span>备注:</span>
              </label>
            </template>
          </q-input>
        </div>
      </div>
      <q-separator style="margin-left: -20px;margin-right: -20px;width: calc(100% + 40px)" />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline
               label="取消"
               color="primary"
               class="q-mr-md"
               type="reset" />
        <q-btn unelevated
               label="确认"
               v-throttle
               color="primary"
               type="submit" />
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>

import _ from 'lodash'
import { addStorageLocation, editStorageLocation } from 'src/boot/system/storage-location'

export default {
  name: 'add-edit-storage-location',
  data () {
    return {
      type: '',
      warehouse: {}, // 所属仓库
      show: false,
      param: {
        number: '',
        name: '',
        adminName: '',
        remark: ''
      }
    }
  },
  methods: {
    showDialog (type, warehouse, data) {
      this.type = type
      this.warehouse = warehouse
      data && (this.param = {
        number: data.number,
        name: data.name,
        remark: data.remark
      })
      type === 'edit' && (this.param.id = data.id)
      this.show = true
    },
    // 重置
    onReset () {
      Object.keys(this.param).map(v => { this.param[v] = '' })
      this.$refs.myForm.resetValidation()
      this.show = false
    },
    onSubmit () {
      const params = _.cloneDeep(this.param)
      if (this.type === 'edit') {
        editStorageLocation(params, this.param.id).then(res => {
          if (res.code + '' === '1200') {
            this.submitSuccess()
          }
        })
      } else {
        addStorageLocation(params, this.warehouse.id).then(res => {
          if (res.code + '' === '1200') {
            this.submitSuccess()
          }
        })
      }
    },
    submitSuccess () {
      this.onReset()
      const tips = `${this.type === 'edit' ? '编辑' : '添加'}成功`
      this.$message.success(tips)
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="stylus">
  >>>.textarea .q-field__control {
    min-height: 72px !important;
  }
</style>
